import { createRouter, createWebHistory } from "vue-router";
import type { RouteRecordRaw } from "vue-router";
import { useAuthStore } from "../stores/auth";

const routes: RouteRecordRaw[] = [
    {
        path: "/",
        name: "Home",
        component: () => import("../views/HomePage.vue"),
        meta: {
            title: "Hustle - AI Agent Marketplace | Create & Monetize AI Agents 24/7",
            description:
                "Join Hustle, the premier AI agent marketplace. Create professional AI agents, build virtual teams, and earn passive income through 24/7 automation. Start your AI hustle today!",
            ogTitle: "Hustle - AI Agent Marketplace",
            ogDescription:
                "Create professional AI agents, build virtual teams, and earn passive income through 24/7 automation.",
            ogImage: "https://hustle.ai/og-home.jpg",
        },
    },
    {
        path: "/marketplace",
        name: "Marketplace",
        component: () => import("../views/MarketplacePage.vue"),
        meta: {
            title: "AI Agent Marketplace - Browse & Discover AI Agents | Hustle",
            description:
                "Discover and browse the best AI agents on Hustle marketplace. Find AI tools for automation, productivity, and business growth. Start your AI journey today.",
            ogTitle: "AI Agent Marketplace - Hustle",
            ogDescription:
                "Discover and browse the best AI agents for automation and productivity.",
            ogImage: "https://hustle.ai/og-marketplace.jpg",
        },
    },
    {
        path: "/agent/:id",
        name: "AgentDetail",
        component: () => import("../views/AgentDetailPage.vue"),
        meta: {
            title: "AI Agent Details - View & Use AI Agents | Hustle",
            description:
                "View detailed information about AI agents including capabilities, tools, pricing, and usage statistics. Start using professional AI agents today.",
            ogTitle: "AI Agent Details - Hustle",
            ogDescription:
                "View detailed information about AI agents and start using them for your projects.",
            ogImage: "https://hustle.ai/og-agent-detail.jpg",
        },
    },
    {
        path: "/create-agent",
        name: "CreateAgent",
        component: () => import("../views/CreateAgentPage.vue"),
        meta: {
            title: "Create AI Agent - Build Your 24/7 Money-Making Agent | Hustle",
            description:
                "Create your own AI agent that works 24/7 to generate passive income. Build professional AI agents with our easy-to-use platform. Start earning with AI today.",
            ogTitle: "Create AI Agent - Hustle",
            ogDescription:
                "Build your own AI agent that works 24/7 to generate passive income.",
            ogImage: "https://hustle.ai/og-create-agent.jpg",
            requiresAuth: true,
        },
    },
    {
        path: "/create-team",
        name: "CreateTeam",
        component: () => import("../views/CreateTeamPage.vue"),
        meta: {
            title: "Create AI Team - Launch Your 24/7 AI Workforce | Hustle",
            description:
                "Launch your AI team with multiple agents working together. Spend pennies to build a team that works around the clock, turning your ideas into reality without intervention.",
            ogTitle: "Create AI Team - Hustle",
            ogDescription:
                "Launch your AI team with multiple agents working together 24/7.",
            ogImage: "https://hustle.ai/og-create-team.jpg",
            requiresAuth: true,
        },
    },
    {
        path: "/dashboard",
        name: "Dashboard",
        component: () => import("../views/UserDashboard.vue"),
        meta: {
            title: "Dashboard - Manage Your AI Agents & Teams | Hustle",
            description:
                "Manage your AI agents, teams, and earnings in one place. Track performance, monitor revenue, and optimize your AI workforce.",
            ogTitle: "Dashboard - Hustle",
            ogDescription:
                "Manage your AI agents, teams, and earnings in one place.",
            ogImage: "https://hustle.ai/og-dashboard.jpg",
            requiresAuth: true,
        },
    },
    {
        path: "/agent-center",
        name: "AgentCenter",
        component: () => import("../views/AgentCenter.vue"),
        meta: {
            title: "Agent Center - Manage Your AI Agents | Hustle",
            description:
                "Manage your AI agents, view earnings, usage statistics, and performance metrics. Track revenue and optimize your AI workforce.",
            ogTitle: "Agent Center - Hustle",
            ogDescription:
                "Manage your AI agents and track their performance and earnings.",
            ogImage: "https://hustle.ai/og-agent-center.jpg",
            requiresAuth: true,
        },
    },
    {
        path: "/team-center",
        name: "TeamCenter",
        component: () => import("../views/TeamCenter.vue"),
        meta: {
            title: "Team Center - Manage Your AI Teams | Hustle",
            description:
                "Manage your AI teams, monitor task execution, and track team performance. View completion rates and optimize workflows.",
            ogTitle: "Team Center - Hustle",
            ogDescription:
                "Manage your AI teams and monitor their performance and task execution.",
            ogImage: "https://hustle.ai/og-team-center.jpg",
            requiresAuth: true,
        },
    },
    {
        path: "/settings",
        name: "Settings",
        component: () => import("../views/UserSettings.vue"),
        meta: {
            title: "Settings - Manage Your Account | Hustle",
            description:
                "Manage your account settings, preferences, subscription plan, and security options. Customize your Hustle experience.",
            ogTitle: "Settings - Hustle",
            ogDescription:
                "Manage your account settings and customize your Hustle experience.",
            ogImage: "https://hustle.ai/og-settings.jpg",
            requiresAuth: true,
        },
    },
    {
        path: "/signin",
        name: "SignIn",
        component: () => import("../views/LoginPage.vue"),
        meta: {
            title: "Sign In - Access Your AI Agent Dashboard | Hustle",
            description:
                "Sign in to your Hustle account to manage your AI agents, teams, and earnings. Access your dashboard and continue building your AI empire.",
            ogTitle: "Sign In - Hustle",
            ogDescription:
                "Sign in to access your AI agent dashboard and manage your AI workforce.",
            ogImage: "https://hustle.ai/og-signin.jpg",
        },
    },
    {
        path: "/signup",
        name: "SignUp",
        component: () => import("../views/RegisterPage.vue"),
        meta: {
            title: "Sign Up - Join the AI Agent Revolution | Hustle",
            description:
                "Join Hustle and start creating AI agents that work 24/7. Build virtual teams, automate processes, and earn passive income with AI technology.",
            ogTitle: "Sign Up - Hustle",
            ogDescription:
                "Join the AI agent revolution and start earning with AI technology.",
            ogImage: "https://hustle.ai/og-signup.jpg",
        },
    },
    {
        path: "/:pathMatch(.*)*",
        name: "NotFound",
        component: () => import("../views/NotFoundPage.vue"),
        meta: {
            title: "Page Not Found - Hustle",
        },
    },
];

const router = createRouter({
    history: createWebHistory(),
    routes,
    scrollBehavior(to, from, savedPosition) {
        if (savedPosition) {
            return savedPosition;
        } else {
            return { top: 0 };
        }
    },
});

// Route guards
router.beforeEach((to, from, next) => {
    // Set page title and meta tags
    if (to.meta.title) {
        document.title = to.meta.title as string;
    }

    // Update meta description
    if (to.meta.description) {
        updateMetaTag("description", to.meta.description as string);
    }

    // Update Open Graph tags
    if (to.meta.ogTitle) {
        updateMetaTag("og:title", to.meta.ogTitle as string, "property");
    }
    if (to.meta.ogDescription) {
        updateMetaTag(
            "og:description",
            to.meta.ogDescription as string,
            "property"
        );
    }
    if (to.meta.ogImage) {
        updateMetaTag("og:image", to.meta.ogImage as string, "property");
    }

    // Check authentication for protected routes
    if (to.meta.requiresAuth) {
        const authStore = useAuthStore();
        if (!authStore.isAuthenticated) {
            next("/");
            return;
        }
    }

    next();
});

// Helper function to update meta tags
function updateMetaTag(
    name: string,
    content: string,
    attribute: string = "name"
) {
    let meta = document.querySelector(`meta[${attribute}="${name}"]`);
    if (meta) {
        meta.setAttribute("content", content);
    } else {
        meta = document.createElement("meta");
        meta.setAttribute(attribute, name);
        meta.setAttribute("content", content);
        document.head.appendChild(meta);
    }
}

export default router;
